<!-- 销售订单详情页面 -->
<template>
  <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
  </pageHeader>
  <div class="title-item">
    <a-space style="margin-left: 40px">
      <div
        style="
          width: 5px;
          height: 23px;
          background-color: rgba(61, 126, 255, 1);
          border: none;
          border-radius: 2px;
        "
      ></div>
      <div>基本信息</div></a-space
    >
  </div>

  <div class="demand-index">
    <a-form
      auto-label-width
      ref="form"
      :model="demand.info"
      autoLabelWidth
      layout="vertical"
    >
      <a-row :gutter="16">
        <a-col
          v-for="element in demandForm.info.design.form"
          :key="element.id"
          :span="element.span"
        >
          <FormItem
            :name="element.name"
            :componentType="element.componentType"
            v-model:props="element.props"
            :required="element.required"
            v-model:values="element.values"
            :disabled="element.disabled"
          />
        </a-col>
      </a-row>
    </a-form>
    <div v-if="route.query.key" class="confirm-button">
      <div>
        <a-space>
          <a-button type="outline" @click="router.back()">取消</a-button
          ><a-button type="primary" @click="confirm()">确认</a-button>
        </a-space>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, onMounted } from 'vue';
  import * as apiList from '@/api/order-management/client-order/index';
  import { useRouter, useRoute } from 'vue-router';

  let checkGroupValue = ['1'];
  const route = useRoute();
  const router = useRouter();
  const breadCrumb: string[] = ['订单管理', '客户订单', '销售订单详情页'];
  const title: string = '销售订单详情页';
  const layout = ref('vertical');
  type Tlayout = 'inline' | 'horizontal' | 'vertical' | undefined;
  const fakeValue = ref(['']);
  // interface DemandType {
  //   info: {
  //     id: number;
  //     clientCompanyId: number;
  //     clientName: string;
  //     userStaffName: string;
  //     userStaffId: number;
  //     extend: any;
  //     orderTime: string;
  //     product: any;
  //     delivery: any;
  //     orderTemplateId: number;
  //     status: number
  //   };
  // }

  const demand = reactive<any>({
    info: {
      id: 0,
      clientCompanyId: 0,
      clientName: '',
      userStaffName: '',
      userStaffId: 0,
      extend: '',
      orderTime: '',
      product: [],
      delivery: [],
      orderTemplateId: 0,
      status: 0,
    },
  });
  interface DemandFormType {
    info: {
      design: {
        form: any[];
      };
    };
  }
  const demandForm = reactive<DemandFormType>({
    info: { design: { form: [] } },
  });
  const getDemandInfo = async (id: number) => {
    let res = await apiList.GetClientOrderDetail({ id });
    demand.info = res;
    demandForm.info.design.form = JSON.parse(res.extend);
    demandForm.info.design.form.sort((a: any, b: any) => a.sort - b.sort);
    demandForm.info.design.form.forEach((item: any) => {
      item.disabled = true;
      if (item.componentType === 'FILE') {
        item.props.data = demand.info.file;
      }
      if (item.componentType === 'NUMBER-UNIVERSAL') {
        item.values = [demand.info.number];
      }
    });
  };
  const formTemplate = ref([]);
  onMounted(() => {
    // 如果是添加则获取状态开启的那个模板
    // getByTemplateStatusOn()
    // 如果是编辑则获取对应的模板
    let Id = Number(router.currentRoute.value.query.id);
    demand.info.id = Id;
    getDemandInfo(Id);
  });

  const confirm = async () => {
    demand.info.state = 2;
    delete demand.info.extends;
    await apiList.putClientOrder(demand.info);
    router.back();
  };
</script>

<style scoped lang="less">
  .demand-index {
    padding: 25px 140px;
    width: 95%;
    margin: 0 auto;
  }

  .success {
    position: absolute;
    right: 30px;
    background-color: #31c27c;
    color: #fff;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .blacklist {
    position: absolute;
    right: 30px;
    background-color: red;
    color: #fff;
    margin-left: 20px;
    border-radius: 100%;
    width: 50px;
    text-align: center;
  }

  .confirm-button {
    display: flex;
    flex-direction: row-reverse;
    // justify-content: space-between;
  }

  .title-item {
    width: 95%;
    height: 60px;
    margin: auto;
    background-color: rgba(245, 247, 250);
    line-height: 60px;
    margin-top: 20px;
  }
  .box {
    padding-top: 10px;
    margin-top: 20px;
    border-top: 1px solid #e4e4e4;
    display: flex;
    justify-content: end;
    width: 100%;
  }
</style>
